import { useState } from 'react';
import styles from './index.module.less';
import clsx from 'clsx';
import { useRecoilState } from 'recoil';
import { RoundDetailState } from '@/state';
import { GameRulesMaskState } from '../../../../state';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Toast } from 'antd-mobile';

const LeftCom: React.FC = () => {
    const [roundDetailState,] = useRecoilState(RoundDetailState);
    const [, setRoundDetailMaskState] = useRecoilState(GameRulesMaskState);
    const { seed, seedCipher, resultCipher, gamePosition, seedPlusResult, orderNo } = roundDetailState as any;

    const copyUrl = `GAME ID:${orderNo || ''}\nOriginal Seed:${seed || ''}\nSeed Cipher:${seedCipher || ''}\nResult:${gamePosition || ''}\nSeed and result:${((seed || '') + (gamePosition || ''))}\nResult Cipher:${resultCipher || ''}`;

    return <div className={styles.LeftCom}>
        <div className={styles.content}>
            <div className={styles.contentPart}>
                <div className={styles.title}>
                    <div className={styles.iconServer}>
                    </div>
                    <div className={styles.text}>
                        <span>Original Seed:</span>
                        <div className={styles.whats} onClick={() => {
                            setRoundDetailMaskState(true);
                        }}>What is Provably Fair</div>
                    </div>
                </div>
                <div className={styles.flexLine}>
                    <div className={styles.value} style={{ width: '86%' }} >
                        <input type='text' readOnly value={seed || ''} />
                    </div>
                    <CopyToClipboard text={copyUrl}
                        onCopy={() => {
                            Toast.show({
                                content: 'the data has been copied, please pasted into text to view'
                            })
                        }}>
                        <div className={styles.copy}></div>
                    </CopyToClipboard>
                </div>
            </div>
            <div className={clsx(styles.contentPart, styles.pt3)}>
                <div className={styles.title}>
                    <div className={styles.iconServer}>
                    </div>
                    <div className={styles.text}>
                        <span>Seed data encrypted by SHA256:</span>
                    </div>
                </div>
                <div className={styles.value}>
                    <input type='text' readOnly value={seedCipher || ''} />
                </div>
            </div>
            <div className={clsx(styles.contentPart, styles.pt3)}>
                <div className={styles.title}>
                    <div className={clsx(styles.client)}>
                    </div>
                    <div className={styles.text}>
                        <div>The position of mines:</div>
                        <div style={{ paddingTop: '6px' }}>{gamePosition}</div>
                    </div>
                </div>
            </div>
            <div className={clsx(styles.contentPart, styles.pt3)}>
                <div className={styles.title}>
                    <div className={styles.iconServer}>
                    </div>
                    <div className={styles.text}>
                        <span>Original Seed plus game result:</span>
                    </div>
                </div>
                <div className={styles.value}>
                    <input type='text' readOnly value={seedPlusResult} />
                </div>
            </div>
            <div className={clsx(styles.contentPart, styles.pt3)}>
                <div className={styles.title}>
                    <div className={clsx(styles.iconServer, styles.iconHash)}>
                    </div>
                    <div className={styles.text}>
                        <span>Result data(encrypted by SHA256 ):</span>
                    </div>
                </div>
                <div className={styles.value}>
                    <input type='text' readOnly value={resultCipher} />
                </div>
            </div>
        </div>
    </div>
}

export default LeftCom;